<template>
  <div class="personCenter">
    <div class="header">
      <Head></Head>
    </div>
    <!-- 中间主体部分 -->
    <div class="main">
      <!-- 左边导航卡 -->
      <div class="left">
        <el-card class="box-card">
          <div class="text item link-to">个人中心首页</div>
          <div class="text item link-to">我的订单</div>
          <div class="text item link-to">修改头像</div>
          <div class="text item link-to">个人资料</div>
          <div class="text item link-to">绑定手机号</div>
        </el-card>
      </div>
      <div class="right">
        <el-card class="box-card">
          <!-- 上面头像和欢迎部分 -->
          <div class="text item">
            <el-row>
            <!-- 左边头像部分 -->
              <el-col :span="24"><div class="grid-content bg-purple">
                <el-container>
                  <el-aside width="80px">
                    <img width="80px" height="80px" src="../assets/avatar.png" alt="" class="img-circle">
                  </el-aside>
                  <el-main>
                    <div name="title">欢迎您</div>
                    <div>
                      <span>麦克格雷壮 &nbsp; &nbsp;账户卡卷余额：100张</span>
                    </div>
                  </el-main>
                  <el-aside width="100px" style="display:flex;justify-content:center;align-items:Center;">
                    <router-link tag="div" to="/subtask">
                      <el-button type="primary">发布任务</el-button>
                    </router-link>
                  </el-aside>
                </el-container>
              </div></el-col>
            </el-row>
          </div>
          
          <!-- 中间任务管理部分 -->
          <div class="text item taskManage">
            <p name="title">任务管理</p>
            <el-row type="flex" class="row-bg" justify="space-around" style="text-align:center">
              <el-col  :span="6"><div class="grid-content bg-purple">
                <img src="../assets/wait.png" alt="" >
                <h1>2</h1>
                <p>待接单</p>
              </div></el-col>
              <el-col  :span="6"><div class="grid-content bg-purple-light">
                <img src="../assets/contract.png" alt="" >
                <h1>2</h1>
                <p>加工中</p>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <img src="../assets/order.png" alt="" >
                <h1>2</h1>
                <p>已完结</p>
              </div></el-col>
            </el-row>
          </div>
          
          
          <!-- 底部任务统计-->
          <div class="text item taskStatis">
            <p name="title">任务统计</p>
            <el-row type="flex" class="row-bg" justify="space-around" style="text-align:center">
              <el-col :span="8"><div class="grid-content bg-purple">
                  <h1 class="number">10</h1>
                  <p>历史已完成</p>
              </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light">
                  <h1 class="number">20</h1>
                  <p>总计发布订单</p>
              </div></el-col>
            </el-row>
          </div>
        </el-card>        
      </div>
    </div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
  components:{
    Head
  }
}
</script>

<style lang="less" scoped>
  .personCenter{
    background:#B9D3EC;
  }
  .header{
    width: 100%;
    background: white;
  }
  .main{
    width: 1200px;
    margin: 0 auto;
    padding-top:50px; 
    display: flex;
    justify-content: space-between;
  }
  .left{
    width: 260px;
    height: 450px;
  }
  .right{
    width: 890px;
  }
  .box-card{
    width: 100%;
    height: 100%;
  }
  .nav .link-to{
    margin: 20px 0;
  }
  
  [name=title]{
    color:#528EC5;
  }

  .taskManage{
    border-top:  1px solid #679DD0;
    border-bottom:  1px solid #679DD0;
    margin: 10px 0 30px;
    padding: 10px 0;
  }
  .taskManage .grid-content .bg-purple{
    position: relative;
  } 
  .taskManage h1{
    position: relative;
    top: -90px;
    color: white;
  }

  .taskManage .grid-content p{
    position: relative;
    top: -70px;
    margin-bottom:-70px; 
  }

  .taskStatis h1{
    color:#5792CA;
  }
</style>
